<!DOCTYPE html>
<html>
<head>
<title>plugin building test</title>
 
<style>
table thead tr { display: block; color: green; }
table tfoot tr { display: block; }
table tbody { display: block; overflow-y: scroll; height: 100px; }
td { padding: 2px; }
</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js"></script>

<script>

// 13/12/28 thead-tfoot.html
// 14/01/01 jquery.tablehelper

(function( $ )
{
	$.fn.tableHelper = function(options)
	{
        var settings = $.extend({
            text         : 'Hello, World!',
            color        : null,
            fontStyle    : null,
            complete     : function() { alert( 'Done!' ) }
        }, options);
	
		// this here means entire selected elements, objectized
		// returning the elements ensures chaining of functions
		
		return this.children().each(function(index) // TODO: good to have children() here ???
		{
			// 'this' here points to one of selected element, naked
			
			var td = $( this ).children().eq(0);
			td.css('color', 'green');
			
			if ( $.isFunction( settings.complete ) ) {
        		settings.complete.call( this );
    		}
    		
    		// returning false to break prematurely
    		
    		subFunc();
		});
		
		// or you can just 'return this' at the end of this scope
	};
	
	function subFunc()
	{
		console.log('subFunc called');
	}
}( jQuery ));

$(document).ready(function()
{
	console.log('ready');
	
	var retunred = $('#body').tableHelper();
	var d = 0;
});

</script>
</head>
<body>

<body style="margin: 2em">

<h3>Table sample with thead and tfoot tags</h3>

<table>
<thead id="header" style="background-color: gray">
	<tr id="header-first">
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
</thead>
<tfoot id="footer" style="background-color: gray">
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One One</td>
		<td>Two Two</td>
		<td>Three Three</td>
	</tr>
</tfoot>
<tbody id="body" style="background-color: lightgray">
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One and One</td>
		<td>Two and Two</td>
		<td>Three and Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
</table>
</body>
</html>